<template>
    <el-footer class="taobao-footer">
        <div class="container">
            <div class="footer-links">
                <div class="link-group">
                    <h4>购物指南</h4>
                    <ul>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">会员介绍</a></li>
                        <li><a href="#">联系客服</a></li>
                    </ul>
                </div>

                <div class="link-group">
                    <h4>支付方式</h4>
                    <ul>
                        <li><a href="#">支付宝支付</a></li>
                        <li><a href="#">微信支付</a></li>
                        <li><a href="#">银行转账</a></li>
                    </ul>
                </div>

                <div class="link-group">
                    <h4>配送方式</h4>
                    <ul>
                        <li><a href="#">上门自提</a></li>
                        <li><a href="#">快递配送</a></li>
                        <li><a href="#">海外配送</a></li>
                    </ul>
                </div>

                <div class="link-group">
                    <h4>售后服务</h4>
                    <ul>
                        <li><a href="#">退款说明</a></li>
                        <li><a href="#">取消订单</a></li>
                        <li><a href="#">投诉建议</a></li>
                    </ul>
                </div>
            </div>

            <div class="copyright">
                <p>© 2023 淘宝宝电子商务平台 版权所有</p>
                <p>毕业设计项目 | 仅供学习交流使用</p>
            </div>
        </div>
    </el-footer>
</template>

<style scoped>
.taobao-footer {
    background-color: #2c2c2c;
    color: #999;
    padding: 30px 0 20px;
    margin-top: 40px;
}

.footer-links {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
}

.link-group {
    text-align: center;
}

.link-group h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 16px;
}

.link-group ul {
    list-style: none;
    padding: 0;
}

.link-group li {
    margin-bottom: 8px;
}

.link-group a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s;
}

.link-group a:hover {
    color: #fff;
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #444;
    font-size: 12px;
    line-height: 1.8;
}
</style>